<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            height: 3000px;
        }
        .fixed{
            position: fixed;
            right: 20px;
            top: 0;
        }
    </style>
</head>
<body>
    <button class="open">打开窗口</button>
    <button class="close">关闭窗口</button>
    <div class="fixed">
        <button class="scrollBy">scrollBy</button>
        <button class="scrollTo">scrollTo</button>
    </div>
</body>
<script>
    // 980(过时)   1280    1366   1920(1.25)   2560 (2)
    console.log(window);

    // 属性
    // innerWidth  innerHeight    窗口的可视宽高 (文档的可视宽高 + 滚动条  不包含控制台)
    // outerWidth  outerHeight    窗口的实际宽高 (文档的可视宽高 + 滚动条 + 控制台)

    // console.log(window.innerWidth,window.innerHeight);
    // console.log(window.outerWidth,window.outerHeight);

    // 方法
    // open(url,name,窗口特征)   =>  window.open()   打开一个新的窗口 或者 查找一个已命名窗口
    // url    跳转的url地址     (可以是网上地址  可以是本地相对地址)
    // name   打开的窗口的命名  (找不到就打开一个新的,找得到就刷新)
    // 窗口特征 可以配置窗口的大小和距离屏幕的位置

    // 返回值: 被打开窗口的window  => 用于关闭该窗口

    // close()    => window.close()   关闭window对应的窗口

    var openBtn = document.getElementsByClassName("open")[0];
    var closeBtn = document.getElementsByClassName("close")[0];
    var scrollByBtn = document.getElementsByClassName("scrollBy")[0];
    var scrollToBtn = document.getElementsByClassName("scrollTo")[0];

    var subWindow = null;
    console.log(openBtn);

    openBtn.onclick = function(){
        // window.open("https://www.baidu.com");    // 没有设置name => 打开一个新的窗口
        // window.open("https://www.baidu.com","baidu"); // 查找一个已命名窗口(找不到就打开一个,找得到就刷新)
        // window.open("./03 offsetParent.html","demo");

        //  window.open("./03 offsetParent.html","demo","width=400px,height=400px,left=100px,top=100px");
        subWindow = window.open("./03 offsetParent.html","demo");
        console.log(subWindow);
    }

    closeBtn.onclick = function(){
        // window.close();  //关闭自己
        if(subWindow){
            subWindow.close(); // 关闭子窗口
        }
    }


    // scrollBy(x,y)   相对于当前滚动条的位置    按照指定的像素值来滚动内容(正值:相加  负值:相减)   

    // scrollTo(x,y)   将滚动条滚动至指定位置
    scrollByBtn.onclick = function(){
        // window.scrollBy(0,100);
        var sum = 0;
        var timer = setInterval(function(){
            sum+=50;
            window.scrollBy(0,50);
            if(sum >= 2000){
                clearInterval(timer);
            }
        },10);
    }

    scrollToBtn.onclick = function(){
        // window.scrollTo(0,2000);
        window.scrollTo({
            top:2000,
            behavior:"smooth",
        });
    }
</script>
</html>